{% extends"_layouts/examples.html" %}
{% block title %}Chip / Variants{% endblock %}

{% block standalone_css %}patterns_chip{% endblock %}

{% block content %}
<button class="p-chip">
  <span class="p-chip__value">21.10</span>
</button>

<span class="p-chip">
  <span class="p-chip__value">21.10</span>
  <button class="p-chip__dismiss">Dismiss</button>
</span>

<button class="p-chip">
  <span class="p-chip__lead">Owner</span>
  <span class="p-chip__value">Bob</span>
</button>

<span class="p-chip">
  <span class="p-chip__lead">Owner</span>
  <span class="p-chip__value">Bob</span>
  <button class="p-chip__dismiss">Dismiss</button>
</span>

<br>

<button class="p-chip--positive">
  <span class="p-chip__value">21.10</span>
</button>

<span class="p-chip--positive">
  <span class="p-chip__value">21.10</span>
  <button class="p-chip__dismiss">Dismiss</button>
</span>

<button class="p-chip--positive">
  <span class="p-chip__lead">Owner</span>
  <span class="p-chip__value">Bob</span>
</button>

<span class="p-chip--positive">
  <span class="p-chip__lead">Owner</span>
  <span class="p-chip__value">Bob</span>
  <button class="p-chip__dismiss">Dismiss</button>
</span>

<br>

<button class="p-chip--caution">
  <span class="p-chip__value">21.10</span>
</button>

<span class="p-chip--caution">
  <span class="p-chip__value">21.10</span>
  <button class="p-chip__dismiss">Dismiss</button>
</span>

<button class="p-chip--caution">
  <span class="p-chip__lead">Owner</span>
  <span class="p-chip__value">Bob</span>
</button>

<span class="p-chip--caution">
  <span class="p-chip__lead">Owner</span>
  <span class="p-chip__value">Bob</span>
  <button class="p-chip__dismiss">Dismiss</button>
</span>

<br>

<button class="p-chip--negative">
  <span class="p-chip__value">21.10</span>
</button>

<span class="p-chip--negative">
  <span class="p-chip__value">21.10</span>
  <button class="p-chip__dismiss">Dismiss</button>
</span>

<button class="p-chip--negative">
  <span class="p-chip__lead">Owner</span>
  <span class="p-chip__value">Bob</span>
</button>

<span class="p-chip--negative">
  <span class="p-chip__lead">Owner</span>
  <span class="p-chip__value">Bob</span>
  <button class="p-chip__dismiss">Dismiss</button>
</span>

<br>

<button class="p-chip--information">
  <span class="p-chip__value">21.10</span>
</button>

<span class="p-chip--information">
  <span class="p-chip__value">21.10</span>
  <button class="p-chip__dismiss">Dismiss</button>
</span>

<button class="p-chip--information">
  <span class="p-chip__lead">Owner</span>
  <span class="p-chip__value">Bob</span>
</button>

<span class="p-chip--information">
  <span class="p-chip__lead">Owner</span>
  <span class="p-chip__value">Bob</span>
  <button class="p-chip__dismiss">Dismiss</button>
</span>

<br>

<button class="p-chip is-dense">
  <span class="p-chip__value">21.10</span>
</button>

<span class="p-chip is-dense">
  <span class="p-chip__value">21.10</span>
  <button class="p-chip__dismiss">Dismiss</button>
</span>

<button class="p-chip is-dense">
  <span class="p-chip__lead">Owner</span>
  <span class="p-chip__value">Bob</span>
</button>

<span class="p-chip is-dense">
  <span class="p-chip__lead">Owner</span>
  <span class="p-chip__value">Bob</span>
  <button class="p-chip__dismiss">Dismiss</button>
</span>

<br>

<button class="p-chip--positive is-dense">
  <span class="p-chip__value">21.10</span>
</button>

<span class="p-chip--positive is-dense">
  <span class="p-chip__value">21.10</span>
  <button class="p-chip__dismiss">Dismiss</button>
</span>

<button class="p-chip--positive is-dense">
  <span class="p-chip__lead">Owner</span>
  <span class="p-chip__value">Bob</span>
</button>

<span class="p-chip--positive is-dense">
  <span class="p-chip__lead">Owner</span>
  <span class="p-chip__value">Bob</span>
  <button class="p-chip__dismiss">Dismiss</button>
</span>

<br>

<button class="p-chip--caution is-dense">
  <span class="p-chip__value">21.10</span>
</button>

<span class="p-chip--caution is-dense">
  <span class="p-chip__value">21.10</span>
  <button class="p-chip__dismiss">Dismiss</button>
</span>

<button class="p-chip--caution is-dense">
  <span class="p-chip__lead">Owner</span>
  <span class="p-chip__value">Bob</span>
</button>

<span class="p-chip--caution is-dense">
  <span class="p-chip__lead">Owner</span>
  <span class="p-chip__value">Bob</span>
  <button class="p-chip__dismiss">Dismiss</button>
</span>

<br>

<button class="p-chip--negative is-dense">
  <span class="p-chip__value">21.10</span>
</button>

<span class="p-chip--negative is-dense">
  <span class="p-chip__value">21.10</span>
  <button class="p-chip__dismiss">Dismiss</button>
</span>

<button class="p-chip--negative is-dense">
  <span class="p-chip__lead">Owner</span>
  <span class="p-chip__value">Bob</span>
</button>

<span class="p-chip--negative is-dense">
  <span class="p-chip__lead">Owner</span>
  <span class="p-chip__value">Bob</span>
  <button class="p-chip__dismiss">Dismiss</button>
</span>

<br>

<button class="p-chip--information is-dense">
  <span class="p-chip__value">21.10</span>
</button>

<span class="p-chip--information is-dense">
  <span class="p-chip__value">21.10</span>
  <button class="p-chip__dismiss">Dismiss</button>
</span>

<button class="p-chip--information is-dense">
  <span class="p-chip__lead">Owner</span>
  <span class="p-chip__value">Bob</span>
</button>

<span class="p-chip--information is-dense">
  <span class="p-chip__lead">Owner</span>
  <span class="p-chip__value">Bob</span>
  <button class="p-chip__dismiss">Dismiss</button>
</span>

<br>

<button class="p-chip is-dense">
  <span class="p-chip__value">21.10</span>
</button>

<button class="p-chip">
  <span class="p-chip__value">21.10</span>
</button>

<span class="p-chip--positive is-dense">
  <span class="p-chip__value">21.10</span>
  <button class="p-chip__dismiss">Dismiss</button>
</span>

<span class="p-chip--positive">
  <span class="p-chip__value">21.10</span>
  <button class="p-chip__dismiss">Dismiss</button>
</span>

<button class="p-chip--caution is-dense">
  <span class="p-chip__lead">Owner</span>
  <span class="p-chip__value">Bob</span>
</button>

<button class="p-chip--caution">
  <span class="p-chip__lead">Owner</span>
  <span class="p-chip__value">Bob</span>
</button>

<span class="p-chip--negative is-dense">
  <span class="p-chip__lead">Owner</span>
  <span class="p-chip__value">Bob</span>
  <button class="p-chip__dismiss">Dismiss</button>
</span>

<span class="p-chip--negative">
  <span class="p-chip__lead">Owner</span>
  <span class="p-chip__value">Bob</span>
  <button class="p-chip__dismiss">Dismiss</button>
</span>

<br>

<p>Inline
  <button class="p-chip is-inline">
    <span class="p-chip__value">21.10</span>
  </button>

  <span class="p-chip--positive is-inline">
    <span class="p-chip__value">21.10</span>
    <button class="p-chip__dismiss">Dismiss</button>
  </span>

  <button class="p-chip--caution is-inline">
    <span class="p-chip__lead">Owner</span>
    <span class="p-chip__value">Bob</span>
  </button>

  <span class="p-chip--negative is-inline">
    <span class="p-chip__lead">Owner</span>
    <span class="p-chip__value">Bob</span>
    <button class="p-chip__dismiss">Dismiss</button>
  </span>
</p>

<p>Inline
  <button class="p-chip is-dense is-inline">
    <span class="p-chip__value">21.10</span>
  </button>

  <span class="p-chip--positive is-dense is-inline">
    <span class="p-chip__value">21.10</span>
    <button class="p-chip__dismiss">Dismiss</button>
  </span>

  <button class="p-chip--caution is-dense is-inline">
    <span class="p-chip__lead">Owner</span>
    <span class="p-chip__value">Bob</span>
  </button>

  <span class="p-chip--negative is-dense is-inline">
    <span class="p-chip__lead">Owner</span>
    <span class="p-chip__value">Bob</span>
    <button class="p-chip__dismiss">Dismiss</button>
  </span>
</p>

<p>Link
  <a href="#" class="p-chip">
    <span class="p-chip__lead">Owner</span>
    <span class="p-chip__value">Bob</span>
  </a>

  <a href="#" class="p-chip">
    <span class="p-chip__value">21.10</span>
  </a>

  <a href="#" class="p-chip" aria-pressed="true">
    <span class="p-chip__value">Selected</span>
  </a>

  <a href="#" class="p-chip">
    <span class="p-chip__lead">Owner</span>
    <span class="p-chip__value">Bob</span>
  </a>

  <a href="#" class="p-chip is-selected">
    <span class="p-chip__lead">Short lead</span>
    <span class="p-chip__value">Short value</span>
  </a>

  <a href="#" class="p-chip">
    <span class="p-chip__value">
      Short value only
    </span>
  </a>

  <a href="#" class="p-chip">
    <span class="p-chip__value">
      A very long value, no lead A very long value, no lead A very long value, no lead A very long value, no lead A very long value, no lead A very long value, no lead A very long value, no lead A very long value, no lead A very long value, no lead A very long value, no lead A very long value, no lead A very long value, no lead A very long value, no lead A very long value, no lead
    </span>
  </a>

  <a href="#" class="p-chip">
    <span class="p-chip__lead">
      Very long lead, short value Very long lead, short value Very long lead, short value Very long lead, short value Very long lead, short value Very long lead, short valueVery long lead, short value Very long lead, short value Very long lead, short value Very long lead, short value Very long lead, short value Very long lead, short value
    </span>
    <span class="p-chip__value">
        Short value
      </span>
  </a>

  <a href="#" class="p-chip">
    <span class="p-chip__lead">
      A very long lead A very long lead A very long lead A very long lead A very long lead
    </span>
    <span class="p-chip__value">
      An even longer value An even longer value An even longer value An even longer value An even longer value An even longer value An even longer value An even longer value
    </span>
  </a>

  <a href="#" class="p-chip--positive">
    <span class="p-chip__value">21.10</span>
  </a>

  <a href="#" class="p-chip--caution is-dense">
    <span class="p-chip__lead">Owner</span>
    <span class="p-chip__value">Bob</span>
  </a>

  <a href="#" class="p-chip--caution">
    <span class="p-chip__lead">Owner</span>
    <span class="p-chip__value">Bob</span>
  </a>

  <a href="#" class="p-chip--negative is-dense">
    <span class="p-chip__lead">Owner</span>
    <span class="p-chip__value">Bob</span>
  </a>

  <a href="#" class="p-chip--negative">
    <span class="p-chip__lead">Owner</span>
    <span class="p-chip__value">Bob</span>
  </a>
</p>

{% endblock %}